<template>
  <!-- 访客记录-详情 -->
  <public-modal
    :footer="false"
    :publicVisible="publicVisible"
    cancelContext="拒绝"
    confirmContext="通过"
    modalStyle="detailModal"
    title="详情页"
    width="700px"
    @cancel="cancel"
    @handleOk="handleOk"
  >
    <div slot="content">
      <div class="common-title">
        <div class="icon"></div>
        <div class="content">活动详情</div>
      </div>

      <table style="margin: 12px 0">
        <tr>
          <td class="td-label">活动名称</td>
          <td class="td-value text-overflow" colspan="3">
            {{ details.activityName }}
          </td>
        </tr>

        <tr>
          <td class="td-label">申报单位</td>
          <td class="td-value text-overflow" colspan="3">
            {{ details.hostUnit }}
          </td>
        </tr>

        <tr>
          <td class="td-label">举办时间</td>
          <td class="td-value text-overflow" colspan="3">{{ details.beginTime }} - {{ details.endTime }}</td>
        </tr>

        <tr>
          <td class="td-label">举办地点</td>
          <td class="td-value text-overflow" colspan="3">
            {{ details.activityLocation }}
          </td>
        </tr>

        <tr>
          <td class="td-label">活动对象</td>
          <td class="td-value text-overflow">
            <a-tooltip placement="topLeft">
              <template slot="title">
                <span> {{ details.activityObject }} </span>
              </template>
              {{ details.activityObject }}
            </a-tooltip>
          </td>
          <td class="td-label">活动规模</td>
          <td class="td-value text-overflow">{{ details.activityNumber }} 人左右</td>
        </tr>

        <tr style="height: auto">
          <td class="td-label">活动内容</td>
          <td class="td-value p-14" colspan="3">
            {{ details.activityContent }}
          </td>
        </tr>

        <!-- 待审核 -->
        <tr v-if="record.type == 1">
          <td class="td-label">提交时间</td>
          <td class="td-value text-overflow">
            {{ details.createTime }}
          </td>
          <td class="td-label">审核单位</td>
          <td class="td-value text-overflow">
            {{ details.policeAgencyName }}
          </td>
        </tr>

        <!-- 审核通过待举办 -->
        <tr v-if="record.type != 1">
          <td class="td-label">提交时间</td>
          <td class="td-value text-overflow">
            {{ details.createTime }}
          </td>
          <td class="td-label">审核时间</td>
          <td class="td-value text-overflow">
            {{ details.examineTime }}
          </td>
        </tr>

        <tr v-if="record.type != 1">
          <td class="td-label">审核单位</td>
          <td class="td-value text-overflow">
            {{ details.policeAgencyName }}
          </td>
          <td class="td-label">审核民警</td>
          <td class="td-value text-overflow">
            {{ details.policeName }}
          </td>
        </tr>

        <tr v-if="record.type != 1 && record.type == 2">
          <td class="td-label">举办状态</td>
          <td class="td-value text-overflow" colspan="3">
            {{ calc_status(details.hostingStatus) }}
          </td>
        </tr>

        <tr v-if="details.hostingStatus == 3 && record.type == 2">
          <td class="td-label">取消理由</td>
          <td class="td-value" colspan="3" style="height: auto">
            {{ details.cancelReasons }}
          </td>
        </tr>

        <!-- 审核拒绝 -->
        <tr v-if="record.type != 1 && record.type == 3">
          <td class="td-label">拒绝原因</td>
          <td class="td-value" colspan="3" style="height: auto">
            {{ details.examineReasons }}
          </td>
        </tr>
      </table>
    </div>

    <div slot="footer"></div>
  </public-modal>
</template>
<script>
import publicModal from '@/components/publicModal'
import { getAction } from '@/api/manage'
export default {
  name: 'detailModal',
  components: { publicModal },
  data() {
    return {
      publicVisible: false,
      details: {},
      record: {},
      clue_photo: [],
    }
  },
  methods: {
    show(records) {
      this.publicVisible = true
      this.record = records
      this.get_detail(records.id)
    },

    async get_detail(id) {
      let { result } = await getAction('/common/activity_declaration/web_detail', { id })
      this.details = result
    },

    calc_status(type) {
      console.log(type)
      if (type == 1) return '待举办'
      else if (type == 2) return '已举办'
      else if (type == 3) return '已取消'
      else return '暂无'
    },

    handleOk() {
      this.publicVisible = false
    },
    cancel() {
      this.publicVisible = false
    },
  },
}
</script>
<style lang="less" scoped>
/deep/ .modalCotent {
  padding: 20px 20px;
}

/deep/ .modalFooter {
  height: 0 !important;
}

table {
  border-collapse: collapse;
}
tr {
  height: 46px;
  font-size: 14px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
}
.td-label {
  background: var(--theme-modal-label-bg);
  border: 0.01rem solid var(--theme-input-border);
  color: var(--theme-tab-text-color);
  width: 120px;
  text-align: center;
}

.td-value {
  background: var(--theme-container-bg);
  border: 0.01rem solid var(--theme-input-border);
  color: var(--theme-modal-label-value-color);
  padding-left: 25px;
  width: 220px;
  max-width: 220px;
}

.click-style {
  color: #47e829;
  cursor: pointer;
}

.p-14 {
  padding: 14px 20px;
}

.click-img {
  width: 150px;
  height: 170px;
  object-fit: cover;
  cursor: pointer;
  margin-left: 10px;
}
</style>
